<template>
  <u-select
    class="select-wrapper"
    :title="$t('选择收货地址')"
    v-model="modal"
    :confirm-color="confirmColor"
    :check-default="refresh"
    :default-value="defaultValue"
    :list="list"
    mode="mutil-column-auto"
    :confirm-text="$t('确定2')"
    :cancel-text="$t('取消2')"
    @confirm="confirm"
    @columnChange="columnChange"
    confirm-color="#165DFF"
  >
  </u-select>
</template>

<script>
	import {
		mapState
	} from 'vuex';
// import { COUNTRY } from "@/config/app";
let COUNTRY = [
  { value: "0", label: "中国", children: [] },
  { value: "1", label: "俄罗斯", children: [] },
];
export default {
  options: {
    styleIsolation: "shared",
  },
  props: {
    value: {
      type: Boolean,
      default: false,
    },
    is_port: {
      type: Boolean,
      default: false,
    },
    select_city_new: {
      type: [Array, Object, null],
      required: false,
      default() {
        return [
          // 初始化对象的属性，确保是有效的默认值
        ];
      },
    },
    select_city_newd: {
      type: [Array, Object, null],
      required: false,
      default() {
        return [
          // 初始化对象的属性，确保是有效的默认值
        ];
      },
    },
    is_register: {
      type: Number,
      default: 0,
    },
  },

  watch: {
    value(val) {
      this.modal = val;
    },
    select_city_new: {
      immediate: true,
      handler(newData) {
        // 通知grandchild数据更新
        if (newData && newData[1]) {
          this.list = newData[1];
          this.country_select = newData[0];
        }
      },
    },
    select_city_newd: {
      immediate: true,

      handler(newData) {
        // 通知grandchild数据更新
        if (newData && newData[1]) {
          this.list = newData[1];
          this.country_select = newData[0];
        }
      },
    },
    modal(val) {
      if (!val) {
        this.$emit("input", val);
        // this.searchResult = [];
        // this.searchText = '';
      }
    },
  },
  data() {
    return {
      modal: false,
      list: COUNTRY,
      confirmColor: "#2979ff",
      country: "0",
      country_select: "",
      defaultValue: [0, 0, 0],
      searchText: "",
      refresh: 0,
      searchResult: [], //自定义搜索的结果
      selectResult: [], //select组件滑动结果
    };
  },
  mounted() {
    this.getList();
  },
  computed: {
    // 使用mapState生成计算属性
    ...mapState({
      lang: state => state.commonData.lang,
    })
  },
  methods: {
    /* 列发生改变 */
    columnChange(e) {
      const {
        detail: {
          value: [a, b, c],
        },
      } = e;
      const guo = this.list[a];
      const sheng = guo.children[b];
      const city = sheng.children[c];

      this.selectResult = [
        {
          label: guo.label,
          value: guo.value,
        },
        {
          label: sheng.label,
          value: sheng.value,
        },
        {
          label: city.label,
          value: city.value,
        },
      ];
      this.defaultValue = [a, b, c];
    },

    getList() {
      const that = this;
      if (that.lang != "zh") {
        that.country = 1;
      }

      if (that.is_port) {
        var params = {
          country: that.country,
          pid: 0,
          is_port: that.is_port,
          lang: that.lang,
        };

        that.$u.api.shopping.getSelectCityList(params)
          .then((res) => {
            that.list = res.data;
          })
          .catch((err) => {});
      } else {
        var params = {
          country: that.country,
          pid: 0,
          lang: that.lang,
        };

        that.$u.api.shopping
          .getSelectCityList(params)
          .then((res) => {
            that.list = res;
          })
          .catch((err) => {});
      }
    },
    // select确认
    confirm(e) {
      this.modal = false;
      this.$emit("change", e);
    },
    // 文本框搜索
    searchCity(e) {
      // this.defaultValue = [0, 0, 0]
      const that = this;

      var country = 0;
      if (that.lang != "zh") {
        country = 1;
      }

      if (that.country_select) {
        if (that.country_select <= 1) {
          country = that.country_select;
        }
      }

      let params = {
        name: this.searchText,
        country: country,
        lang: that.lang,
        is_register: that.is_register,
      };

      if (that.is_port) {
        params = {
          name: this.searchText,
          country: country,
          is_port: that.is_port,
          lang: that.lang,
          is_register: that.is_register,
        };
      }

      this.$u.api.basic.getSearchCity(params).then((res) => {
        if (!res) {
          this.$u.toast(this.$t("未查询到数据"));
          return;
        }
        this.searchResult = res;
        const c = this.list.filter((item, index) => {
          if (item.value == res[0].id) {
            this.defaultValue[0] = index;
            this.refresh++;
            return true;
          } else {
            return false;
          }
        })[0];
        const s = c?.children.filter((item, index) => {
          if (item.value == res[1].id) {
            this.defaultValue[1] = index;
            this.refresh++;
            return true;
          } else {
            return false;
          }
        })[0];
        const b = s?.children.filter((item, index) => {
          if (item.value == res[2].id) {
            setTimeout(() => {
              this.defaultValue[2] = index;
              this.refresh++;
            }, 10);
            return true;
          } else {
            return false;
          }
        })[0];
      });
    },
    // 文本框搜索 确认结果
    searchConfirm(it) {
      let result = [];
      if (it.length > 0) {
        result = it.map((item) => {
          return {
            label: item[this.$t("item.name")],
            value: item.id,
          };
        });
      }
      this.modal = false;
      this.$emit("change", result);
    },
  },
};
</script>

<style lang="scss" scoped>
  .select-wrapper {
    ::v-deep .u-drawer-content {
      border-radius: 24rpx 24rpx 0rpx 0rpx;
      .u-select__header {
        padding-top: 20rpx;
      }
    }

  }

</style>
